<template>
    <view class="login p20box linear-bg">
        <view class="login-title">
            <image class="logo" src="/static/logo.png"></image>
            <view>
                <view class="title">蕴明计划维修管理系统</view>
                <view class="welcome">欢迎登录使用！</view>
            </view>
        </view>
        <view class="login-form">
            <up-form
                labelPosition="left"
                :model="data.form"
                ref="loinFormRef"
                :rules="data.rules"
            >
                <up-form-item prop="username">
                    <up-input
                        placeholder="输入您的账号"
                        border="surround"
                        clearable
                        v-model="data.form.username"
                    ></up-input>
                </up-form-item>
                <up-form-item prop="password">
                    <up-input
                        password
                        placeholder="输入您的密码"
                        border="surround"
                        clearable
                        v-model="data.form.password"
                    ></up-input>
                </up-form-item>
            </up-form>

            <!-- <view>
               
            </view>
            <view class="mant20">
               
            </view> -->
            <view class="mant20">
                <up-button type="primary" @click="onLoginClick">登录</up-button>
            </view>
        </view>
    </view>
</template>

<script setup>
import { ref, reactive } from 'vue';
import { loginApi } from './api';
import form from 'uview-plus/components/u-form/form';
const data = reactive({
    form: {
        username: 'admin',
        password: '123123',
    },
    rules: {
        username: {
            required: true,
            message: '输入您的账号',
            trigger: ['blur', 'change'],
        },
        password: {
            required: true,
            message: '输入您的密码',
            trigger: ['blur', 'change'],
        },
    },
});
const loinFormRef = ref(null);

const onLoginClick = () => {
    loinFormRef.value.validate().then((valid) => {
        if (valid) {
            console.log('校验通过');
            // const res = loginApi(data.form);
            uni.showToast({
                title: '登录成功',
                icon: 'success',
                duration: 1000,
            });
            setTimeout(() => {
                uni.navigateTo({
                    url: '/pages/home/home',
                });
            }, 1300);
        } else {
            console.log('校验通过');
        }
    });
};
</script>

<style lang="scss">
.login {
    display: flex;
    flex-direction: column;
    padding: 0 40rpx;

    .login-title {
        height: 40%;
        display: flex;
        align-items: flex-end;
        // flex-direction: column;
        // justify-content: flex-end;
        padding-bottom: 80rpx;
        image {
            width: 120rpx;
            height: 120rpx;
            margin-right: 30rpx;
        }
        .title {
            font-size: 24px;
        }
        .welcome {
            font-size: 16px;
            margin-top: 20rpx;
        }
    }
    .login-form {
        width: 100%;
    }
}
</style>
